<template>
  <h1>Dropdown下拉菜单</h1>
  <Captions title="基础用法">
    使用 <span class="mark-span">title</span>来插入点击内容
  </Captions>
  <Demo :component="Dropdown1"></Demo>

  <Captions title="支持禁用">
    使用 <span class="mark-span">disabled</span>禁用需要禁止点击的菜单
  </Captions>
  <Demo :component="Dropdown2"></Demo>

  <Captions title="标题部分插入自定义内容">
    支持插槽插入标题，使用 <span class="mark-span">v-slot:title</span>即可
  </Captions>
  <Demo :component="Dropdown3"></Demo>

  <Captions title="菜单项增加图标">
    使用 <span class="mark-span">icon</span>来给每个菜单项增加图标
  </Captions>
  <Demo :component="Dropdown4"></Demo>

  <TableDes title="dropdown Attributes" :headList="headList" :columnList="columnList"></TableDes>

  <TableDes title="dropdown-item Attributes" :headList="headList1" :columnList="columnList1"></TableDes>

  <TableDes title="Slot" :headList="headListSlot" :columnList="columnListSlot"></TableDes>
</template>

<script lang="ts">
  import Demo from '../Demo.vue'
  import Dropdown1 from './Dropdown1.vue'
  import Dropdown2 from './Dropdown2.vue'
  import Dropdown3 from './Dropdown3.vue'
  import Dropdown4 from './Dropdown4.vue'
  import Captions from '../Captions.vue'
  import TableDes from '../TableDes.vue'
  export default {
    name: "DropdownDemo",
    components:{
      Demo, Captions, TableDes
    },
    setup(){
      const headList = ['参数', '说明', '类型', '可选值', '默认值']
      const columnList = [
        ['title','点击的内容，也可通过具名 slot （见下表）传入',  'string', ' —',' —'],
      ]
      const headList1 = ['参数', '说明', '类型', '可选值', '默认值']
      const columnList1 = [
        ['disabled','禁用菜单',  'boolean',' —', ' true'],
        ['icon','菜单增加icon图标 ','string',  '—', ' —'],
      ]
      const headListSlot = ['name', '说明', '插槽使用说明']
      const columnListSlot = [
        ['title','插槽插入点击内容', 'v-slot:title']
      ]
      return { Dropdown1, Dropdown2, Dropdown3, Dropdown4,headList, columnList, headList1, columnList1, headListSlot, columnListSlot }
    }
  }
</script>

<style scoped>

</style>
